<template>
  <div>
    <div class="nolist" v-if="order_list_deal.length <= 0"><span>成交暂无数据...</span></div>
    <div v-else class="position_list" v-for="(item, index) in order_list_deal" :key="index">
      <div class="list_name">
        <span>{{$t('contract_name')}}</span>
        <span>{{ item.symbol_cn }}</span>
      </div>
      <div class="list_text">
        <div>
          <span>{{$t('contact_id')}}：</span>
          <span>{{ item.symbol }}</span>
        </div>
        <div>
          <span>{{$t('newmine.deal')}}：</span>
          <span>{{ item.rise_fall == 'RISE' ? '买' : '卖' }}</span>
        </div>
      </div>
      <div class="list_text">
        <div>
          <span>{{$t('newmine.ordernum')}}：</span>
          <span>{{ item.order_number }}</span>
        </div>
        <div>
          <span>{{$t('newmine.earnings')}}：</span>
          <span>{{ Number(item.profit) || '0.00' }}</span>
        </div>
      </div>
      <div class="list_text">
        <div>
          <span>{{$t('newmine.profit_stop_price')}}：</span>
          <span>{{ Number(item.stop_profit_price) || '0.00' }}</span>
        </div>
        <div>
          <span>{{$t('newmine.loss_stop_price')}}：</span>
          <span>{{ Number(item.stop_loss_price) || '0.00' }}</span>
        </div>
      </div>
      <div class="list_text">
        <div>
          <span>{{$t('newmine.open_price')}}：</span>
          <span>{{ Number(item.open_price) || '0.00' }}</span>
        </div>
        <div>
          <span>{{$t('newmine.deal_price')}}：</span>
          <span>{{ Number(item.close_price) || '0.00' }}</span>
        </div>
      </div>
      <div class="list_text">
        <div>
          <span>{{$t('tip')}}：</span>
          <span>{{ Number(item.service_fee) || '0.00' }}</span>
        </div>
      </div>
      <div class="list_text">
        <div>
          <span>{{$t('newmine.deal_num')}}：</span>
          <span>{{ item.volume }}</span>
        </div>
        <div class="text_last">
          <span>{{$t('newmine.create_time')}}：</span>
          <span>{{ item.created_at }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示行情 */,
    ticket: state => state.trade.ticket /*,, 推送数据 */
  }),
  data() {
    return {
      chicangtime: null /* 控制时间 */,
      order_list_deal: []
    };
  },
  beforeDestroy() {
    clearInterval(this.chicangtime);
    this.chicangtime = null;
  },
  mounted() {
    this.loadtime();
  },
  methods: {
    loadtime() {
      this.get_order_list_deal();
      this.chicangtime = setInterval(() => {
        this.get_order_list_deal();
      }, 2000);
    },
    get_order_list_deal() {
      this.$get('addons/tf-futures/order/counts?type=1').then(res => {
        if (res.code == 200) {
          if (res.data.length == 0) {
            this.$message.error('暂无结算单');
          }
          this.order_list_deal = res.data;
        }
      });
    }
  }
};
</script>

<style scoped>
.position_list {
  width: 100%;
  height: 4.5rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-around;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  margin-top: 0.2rem;
  border-bottom: 0.013333rem solid #333;
}

.list_name {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.375rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  color: #e96302;
}

.list_text {
  width: 100%;
  height: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.3rem;
  box-sizing: border-box;
  font-size: 0.3rem;
  color: #ccc;
}

.text_last {
  color: #909090;
  margin-top: 0.2rem;
}

.nolist {
  font-size: 0.45rem;
  letter-spacing: 2px;
  color: #666;
  text-align: center;
  margin-top: 3rem;
}
</style>
